<style lang="scss" scoped>

  $width:1240px;
  $height:750px;

  $bg_color:#f0f0f0;

  .outer-layer{
    width: 100%;
    height: 100%;
    background:rgba(0,0,0,0.3);
    position: fixed;
    left:0;
    top:0;
    z-index: 998;
    user-select: none;
    user-drag: none;
  }

  .dialog-container{
    width:$width;
    height: $height;
    overflow-y: scroll;
    position: fixed;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
    z-index: 1000;
    background: $bg_color;
    border-radius: 5px;
    padding: 20px;
  }

  .dialog-header{
    clear: both;
    float: left;
    border-bottom: 2px solid #d3d3d3;
    width:100%;
    height:auto;
  }

  .dialog-body{
    width:100%;
    height: auto;
    padding: 20px 0px;
    clear: both;
    float: left;
  }

  .dialog-footer{
    width:100%;
    height: auto;
    padding: 20px 0px;
    clear: both;
    float: left;
    padding-top: 0px;
  }

</style>
<template>
  <div class="outer-layer">
    <div class="dialog-container">
      <div class="dialog-header">
        <slot name="header"></slot>
      </div>
      <div class="dialog-body">
        <slot name="body"></slot>
      </div>
      <div class="dialog-footer">
        <el-button v-if="!readOnly" type="primary" @click="submit()" :loading="subLoading">提交</el-button>
        <el-button @click="closeLayer()">取消</el-button>
      </div>
    </div>
  </div>
</template>
<script>

  import { Button } from "element-ui";

  export default{
    name:"Dialog",
    props: {
      subLoading: {
        type: Boolean,
        default: false
      },
      readOnly: {
        type: Boolean,
        default: false
      }
    },
    data(){
      return {}
    },
    components:{
      "ElButton":Button
    },
    methods:{
      closeLayer(){


        this.$router.go(-1);

      },
      submit () {
        this.$emit('on-submit')
      }
    }
  }
</script>
